<template>
    <div class="container">
        <div class="search">
            <el-input placeholder="搜索影院" :prefix-icon="Search"></el-input>
            <div class="cate-list f fac">
                <div class="active">全部</div>
                <div>品牌</div>
                <div>特色</div>
                <div>距离最近</div>
                <div>价格最低</div>
                <div>评分最高</div>
            </div>
        </div>

        <div class="list">
            <div class="item">
                <div class="name">万达影城（CBD店）</div>
                <div class="location">地址：北京市朝阳区万达广场</div>
                <div class="tag-list f fac">
                    <div class="tag b">IMAX</div>
                    <div class="tag p">杜比影院</div>
                    <div class="tag g">4K激光</div>
                </div>
                <div class="info f fac">
                   <el-icon color="#FACC15" size="18px"><StarFilled /></el-icon> 4.8
                   | 2.5km | 人均￥45
                </div>
                <div class="price">￥38起</div>
            </div>
            <div class="item">
                <div class="name">越界影城</div>
                <div class="location">地址：重庆市渝中区</div>
                <div class="tag-list f fac">
                    <div class="tag b">IMAX</div>
                    <div class="tag p">杜比影院</div>
                    <div class="tag g">4K激光</div>
                    <div class="tag pink">情侣座</div>
                </div>
                <div class="info f fac">
                   <el-icon color="#FACC15" size="18px"><StarFilled /></el-icon> 4.8
                   | 2.5km | 人均￥45
                </div>
                <div class="price">￥48起</div>
            </div>
            <div class="item">
                <div class="name">保利国际影城</div>
                <div class="location">地址：重庆市渝中区</div>
                <div class="tag-list f fac">
                    <div class="tag b">IMAX</div>
                    <div class="tag p">杜比影院</div>
                    <div class="tag g">4K激光</div>
                </div>
                <div class="info f fac">
                   <el-icon color="#FACC15" size="18px"><StarFilled /></el-icon> 4.8
                   | 2.5km | 人均￥65
                </div>
                <div class="price">￥51起</div>
            </div>
            <div class="item">
                <div class="name">越界影城</div>
                <div class="location">地址：重庆市渝中区</div>
                <div class="tag-list f fac">
                    <div class="tag b">IMAX</div>
                    <div class="tag p">杜比影院</div>
                    <div class="tag g">4K激光</div>
                    <div class="tag pink">情侣座</div>
                </div>
                <div class="info f fac">
                   <el-icon color="#FACC15" size="18px"><StarFilled /></el-icon> 4.8
                   | 2.5km | 人均￥45
                </div>
                <div class="price">￥48起</div>
            </div>
            <div class="item">
                <div class="name">保利国际影城</div>
                <div class="location">地址：重庆市渝中区</div>
                <div class="tag-list f fac">
                    <div class="tag b">IMAX</div>
                    <div class="tag p">杜比影院</div>
                    <div class="tag g">4K激光</div>
                </div>
                <div class="info f fac">
                   <el-icon color="#FACC15" size="18px"><StarFilled /></el-icon> 4.8
                   | 2.5km | 人均￥65
                </div>
                <div class="price">￥51起</div>
            </div>
        </div>
    </div>
</template>

<script setup>    
import { Search } from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
    .container {
        width: 50%;
        padding-top: 60px;
        .search {
            .cate-list {
                margin-top: 24px;
                div {
                    background-color: #e5e7eb;
                    color: #374151;
                    padding: 6px;
                    border-radius: 4px;
                    margin-right: 12px;
                    cursor: pointer;
                }
                .active {
                    background-color: var(--el-color-primary);
                    color: #fff;
                }
            }
        }
        .list {
            margin-top: 30px;
            .item {
                padding: 12px;
                position: relative;
                &:hover {
                    background-color: #eee;
                }
                .name {
                    font-size: 16px;
                }
                .location {
                    font-size: 14px;
                    color: #666;
                }
                .tag-list {
                    margin-top: 6px;
                    .tag {
                        border-radius: 10px;
                        font-size: 12px;
                        padding: 2px 6px;
                        margin-right: 4px;
                    }
                    .b {
                        background-color: #dbeafe;
                        color: #2563ee;
                    }
                    .p {
                        background-color: #f3e8ff;
                        color: #9333ea;
                    }
                    .g {
                        background-color: #dcfce7;
                        color: #16ab9b;
                    }
                    .pink {
                        background-color: #fce7f3;
                        color: #db2777;
                    }
                }
                .info {
                    color: #999;
                    margin-top: 4px;
                }
                .price {
                    background-color: var(--el-color-primary);
                    color: #fff;
                    font-size: 14px;
                    position: absolute;
                    top: 12px;
                    right: 12px;
                    border-radius: 4px;
                    padding: 2px 4px;
                }
            }
        }
    }
</style>